<template>
    <div class="option-input">
        <Select :value="modelValue" class="option-input-select" :filter-by-label="true" filterable prefix="" v-model="selectData" :not-found-text="$ct('global.common.nodata', { defaultValue: '暂无数据...' })" v-bind="$attrs" @on-change="handleSelect">
            <slot name="default"></slot>
        </Select>
    </div>
</template>

<script>
export default {
    props: ['modelValue'],
    emits: ['on-attach', 'update:modelValue'],
    data () {
        return {
            selectData: "",
            showOption: false
        }
    },
    methods: {
        handleSelect (value) {
            this.$emit('on-attach', value);
            this.$emit('update:modalValue', value);
        }
    }
}
</script>

<style lang="scss" scoped>
    .option-input {
        position: relative;

        .option-input-select {
            width: 100%;
        }

        // .option-list {
        //     position: absolute;
        //     width: 100%;
        //     background-color: #fff;
        //     color: #515a6e;
        //     max-height: 200px;
        //     overflow: auto;

        //     .option-item {
        //         padding: 10px 5px;
        //     }
        // }
    }
</style>